<template>
  <div class="setting-content">
    <h2 class="setting-header">
      <strong>偏好设置</strong>
    </h2>
    <div class="content">
      <div class="block">
        <div class="tip">界面与显示</div>
        <div class="row">
          <div class="label">个人主题色</div>
          <div class="desc">允许用户根据自己的偏好选择界面颜色，提升使用体验。</div>
          <div class="content" v-if="personalizeData.themeColor.updateTime">最近一次修改 {{personalizeData.themeColor?.updateTime}}</div>
          <div class="content" v-else><span><i class="iconfont">&#xe687;</i>未设置</span></div>
          <div class="action">
            <el-button type="primary" link @click="handleSetThemeColor">修改</el-button>
          </div>
        </div>
      </div>
      <div class="block">
        <div class="tip">隐私设置</div>
        <div class="row">
          <div class="label">文件加密密码</div>
          <div class="desc">文件加密通常指的是对敏感数据(如会话录像、日志文件等)进行加密存储，以确保这些数据的安全性。</div>
          <div class="content" v-if="personalizeData.fileEncryptionPassword.updateTime">最近一次修改 {{personalizeData.fileEncryptionPassword?.updateTime}}</div>
          <div class="content" v-else><span><i class="iconfont">&#xe687;</i>未设置</span></div>
          <div class="action">
            <el-button type="primary" link>修改</el-button>
          </div>
        </div>
      </div>
      <div class="block">
        <div class="tip">资料库设置</div>
        <div class="row">
          <div class="label">公开/私密</div>
          <div class="desc">决定内容是向所有人公开还是仅限特定用户或群组查看</div>
          <div class="content" v-if="personalizeData.isPublic?.updateTime">最近一次修改 {{personalizeData.isPublic.updateTime}}</div>
          <div class="content" v-else><span><i class="iconfont">&#xe687;</i>未设置</span></div>
          <div class="action">
            <el-button type="primary" link>修改</el-button>
          </div>
        </div>
      </div>
    </div>
    <!-- 修改主题色 -->
    <ThemeColor v-model:showDrawer="showThemeColor"/>
  </div>
</template>
<script setup>
import { ref } from 'vue'
import ThemeColor from '@/views/personal/info/components/ThemeColor.vue'
import { getPersonalize } from "@/api/personal/info/personalize"

const showThemeColor = ref(false)
const handleSetThemeColor = () => {
  showThemeColor.value = true
}

const personalizeData = ref(null)
const getPersonalizeData = async () => {
  const res = await getPersonalize()
  personalizeData.value = res.data
}
getPersonalizeData()

if(process.env.NODE_ENV === 'development') {
  personalizeData.value = {
    themeColor: { //个人主题色
      data: '#0064C8',
      updateTime: '2024-09-27 10:24:25'
    },
    fileEncryptionPassword: { //文件加密密码
      data: null,
      updateTime: null
    },
    isPublic: { //公开/私密
      data: true,
      updateTime: '2024-09-27 10:24:25'
    }
  }
}
</script>
<style scoped lang='scss'>
.setting-content{
  .content{
    .block{
      background: rgb(255, 255, 255);
      font-family: PingFangSC;
      color: rgb(51, 51, 51);
      letter-spacing: 0px;
      .tip{
        padding: 0px 16px;
        font-weight: 500;
        color: rgb(128, 128, 128);
        line-height: 22px;
        margin-top: 16px;
      }
      .row{
        display: flex;
        padding: 15px 16px;
        line-height: 20px;
        border-bottom: 1px solid rgb(229, 229, 229);
        .label{
          width: 90px;
          font-weight: 500;
          margin-right: 24px;
        }
        .desc{
          width: 50%;
          color: rgb(128, 128, 128);
          margin-right: 24px;
        }
        .content{
          flex: 1 1 0%;
          i{
            margin-right: 5px;
            color: #666;
            font-size: 14px;
          }
        }
        .aciton{
          color: rgb(0, 100, 200);
          cursor: pointer;
          min-width: 24px;
          margin-left: 24px;
        }
      }
    }
  }
}
</style>